<template>
  <el-container >
    <el-header >
        <el-row>
          <el-col :span="3" :offset="1" ><img src="/static/logo1.PNG" ></el-col>
          <el-col :span="5" :offset="15" >
          <span v-if="uAlias ==''||uAlias==null">
            <ul>
              <li style="float: left; list-style-type:none"><el-button type="primary" class="mybtn" @click="toLogin">登录</el-button> </li>
              <li style="float: left; list-style-type:none">&nbsp;</li>
              <li style="float: left; list-style-type:none"><el-button type="info" class="mybtn"  @click="toRegister">注册</el-button></li>
            </ul>
          </span>
          <span v-else>
              <router-link to="/tomyinfor">欢迎, {{uAlias}}</router-link> &nbsp; <el-button @click="loginout()">注销</el-button>
          </span>






          </el-col>
        </el-row>
    </el-header>
    <el-main >
      <el-row>
        <el-col :span="24" >
          <el-menu
            default-active="1"
            class="el-menu-demo"
            background-color="#545c64"
            mode="horizontal"
            active-text-color="#ffd04b"
          >
            <el-menu-item   index="1"><router-link to="/index" class="a">首页</router-link></el-menu-item>
            <el-menu-item   index="2" ><router-link to="/onlinemovie" class="a">上映电影</router-link></el-menu-item>
            <el-menu-item   index="3"><router-link to="/onnextmovie" class="a">即将上映</router-link></el-menu-item>
            <el-menu-item   index="4"><router-link to="/index" class="a">立即购票</router-link></el-menu-item>
            <el-menu-item   index="5"><router-link to="/filmcart" class="a">购物车</router-link></el-menu-item>
            <el-menu-item   index="6"><router-link to="/myOrder" class="a">订单详情</router-link></el-menu-item>
            <span style="float: right; position: relative ;top:12px;width:500px" >
              <el-row  >
                <el-col :span="12"><el-input v-model="input" placeholder="请输入内容" @click="searchfilm"></el-input></el-col>
                <el-col :span="11" :offset="1">   <el-button>搜索</el-button></el-col>
              </el-row>
            </span>
          </el-menu>
        </el-col>
      </el-row>
    </el-main>
  </el-container>

</template>

<script>

    export default {
        name: "Header",
        data(){
          return {
              activeIndex2:1,
              search:'',
            uAlias:JSON.parse(sessionStorage.getItem('userinfo')).uAlias ,
            input:''
          }
        },
        methods:{
            toRegister(){
                console.log("跳转注册页")
                this.$router.push("/register")
            },
            toLogin(){
                console.log("跳转到登陆")
                this.$router.push("/login")
            },
          loginout(){
            sessionStorage.clear();
            //刷新页面
            this.uAlias= null;
          }
            } ,
          searchfilm(){
              this.axios({
                url:'http://localhost:80/'
              }).then(function (res) {

              })
          }
    }
</script>

<style scoped>

  .el-menu-item{
    position: relative;
    left: 5%;
    font-size:21px;
  }
  .a{
     text-decoration: none;
  }
  .s1{
    border: 1px solid red;
  }



</style>
